<template>
    <el-dialog @close="closeWin" v-model="dialogVisible" width="80%" title="字典项信息" destroy-on-close center>
        <template #default>
            <!-- 搜索栏部分开始 -->
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <!-- model 绑定表单数据 -->
                    <el-form :inline="true" :model="queryDictItem" class="demo-form-inline">
                        <el-form-item label="标签">
                            <el-input v-model="queryDictItem.dictItemTag" placeholder="标签" />
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select
                                style="width: 100px"
                                v-model="queryDictItem.dictItemStatus"
                                placeholder="选择状态"
                            >
                                <el-option value="0" :selected="true" label="全部" />
                                <el-option value="1" label="正常" />
                                <el-option value="2" label="废弃" />
                                <el-option value="99" label="删除" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="loadDictItem">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <!-- 搜索栏部分结束 -->
            <!-- 工具栏部分开始 -->
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="新增字典项"
                        placement="top-start"
                    >
                        <el-button @click="toAddDictItem" type="primary"><el-icon><Plus /></el-icon></el-button>
                    </el-tooltip>
                    <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary"><el-icon><EditPen /></el-icon></el-button>
                    <el-button @click="deleteBtnHandler" :disabled="deleteBtnDisabled" type="primary"><el-icon><Minus /></el-icon></el-button>
                    <el-button type="primary"><el-icon><Upload /></el-icon></el-button>
                    <el-button type="primary"><el-icon><Download /></el-icon></el-button>
                </el-col>
            </el-row>
            <!-- 工具栏部分结束 -->
            <!-- 列表部分开始 -->
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <el-table ref="dictItemTable" @selection-change="handleSelectionChange" :data="dictItems" border :stripe="true" style="width: 100%">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="dictItemId" label="#"  />
                        <el-table-column prop="dictItemTag" label="标签"  />
                        <el-table-column prop="dictItemValue" label="字典项值"  />
                        <el-table-column prop="dictItemOrder" label="字典项顺序"  />
                        <el-table-column prop="dictItemNotes" label="字典项备注"  />
                        <el-table-column prop="dictStatus" label="状态" >
                            <template #default="scope">
                                <el-tag type="success" v-if="scope.row.dictItemStatus == 1">正常</el-tag>
                                <el-tag type="warning" v-else-if="scope.row.dictItemStatus == 2">废弃</el-tag>
                                <el-tag type="danger" v-else>删除</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column width="180" prop="createTime" label="创建时间"  />
                        <!-- 行工具栏 -->
                        <el-table-column width="140" label="操作">
                            <template #default="scope">
                                <el-button type="primary" @click="toEditDictItem(scope.row.dictItemId)"  size="small">编辑</el-button>
                                <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                                               @confirm="deleteStudent(scope.row.studentId)" title="您确定要删除这个学生？">
                                    <template #reference>
                                        <el-button type="danger"  size="small">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <!-- 列表部分结束 -->
            <!-- 分页部分开始 -->
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit" :total="total" />
                </el-col>
            </el-row>
            <!-- 分页部分结束 -->


        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="20"></el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="closeWin">关闭</el-button>
                </el-col>
            </el-row>
        </template>
    </el-dialog>
    <DictItemAddWin :visible="dictItemAddWinDialogVisible" :dictType="currentDictType" @optionCompleted="addDictItemOptionCompleted"/>
</template>

<script>
import {watch} from "vue";
import DictItemRequest from '../../../api/dictItem.js';

import DictItemAddWin from './dict-item-add-win.vue';

export default {
    props:["visible","dictType"],// 属性
    emits:["optionCompleted"],// 暴漏的事件
    name: "dict-item.vue",
    components:{
        DictItemAddWin
    },
    data(){
        return{
            dialogVisible: false, // 弹窗标记
            queryDictItem:{},// 绑定查询条件
            dictItems:[],// 存储查询的item列表
            total:0,// 总记录数
            limit:10,// 每页显示的记录
            currentPage:1,// 当前页码
            editBtnDisabled:true,// 编辑按钮是否禁用
            deleteBtnDisabled:true,// 删除按钮是否禁用
            currentDictType:undefined,

            dictItemAddWinDialogVisible:false, // 添加字典项弹窗标志
        }
    },methods:{
        /**
         * 添加字典项操作完成处理事件
         */
        addDictItemOptionCompleted(){
            // 关闭弹窗
            this.dictItemAddWinDialogVisible = false;
            // 重新加载数据
            this.loadDictItems();
        },
        /**
         * 翻页事件
         */
        pageChange(currentPage,currentLimit){

        },
        /**
         * 行编辑按钮事件
         * @param dictItemId
         */
        toEditDictItem(dictItemId){

        },
        /**
         * 弹窗显示新增字典项
         * 工具栏中的新增按钮事件
         */
        toAddDictItem(){
            this.dictItemAddWinDialogVisible = true;
        },
        /**
         * 关闭当前的窗体
         */
        closeWin(){
            // 通知父窗体，操作完成
            this.$emit("optionCompleted");
        },
        /**
         * 加载字典项列表
         */
        loadDictItems(){
            // 准备参数
            this.queryDictItem.page = this.currentPage;
            this.queryDictItem.limit = this.limit;
            this.queryDictItem.dictType = this.currentDictType;
            DictItemRequest.loadDictItem(this.queryDictItem,res => {
                console.log(res)
                // 赋值
                this.dictItems = res.data.data;
                this.total = res.data.total;
            });
        }
    },mounted(props) {
        //this.loadDictItems();
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
            if(this.dialogVisible){
                this.loadDictItems();
            }
        });
        watch(()=>this.dictType,(newVal,oldVal)=>{
            this.currentDictType = newVal;
            if(this.dialogVisible){
                this.loadDictItems();
            }
        });
    }
}
</script>

<style scoped>

</style>